<template>
  <div>
    <!-- 个人信息卡片 -->
    <el-card style="width: 95%; margin: 20px auto;">
      <div style="width: 95%; margin: auto;">
        <el-descriptions title="用户信息">
          <el-descriptions-item label="用户名">{{ patient.patientName }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ patient.patientPhone }}</el-descriptions-item>
          <el-descriptions-item label="身份证">{{ patient.patientCardId }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ patient.patientSex }}</el-descriptions-item>
          <el-descriptions-item label="生日">{{ patient.patientBirthday }}</el-descriptions-item>
          <el-descriptions-item label="余额">{{ patient.patientMoney }}
            <el-tag size="small" style="margin-left: 10px;" @click="moneyDialogFormVisible = true;">充值</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="small">{{ patient.remark }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 病历信息 -->
    <div style="width: 95%; margin: auto;">
        <el-descriptions title="病历信息">
          <el-descriptions-item label="姓名">{{ record.patientName }}</el-descriptions-item>
          <el-descriptions-item label="病情简述">{{ record.recordDesc }}</el-descriptions-item>
          <br>
          <el-descriptions-item label="健康状况">{{ record.recordHealth }}</el-descriptions-item>
          <el-descriptions-item label="感染病史">{{ record.recordInfect }}</el-descriptions-item>
          <el-descriptions-item label="感染病史详情">{{ record.recordInfectDetails }}</el-descriptions-item>
          <el-descriptions-item label="过敏史">{{ record.recordAllergy }}</el-descriptions-item>
          <el-descriptions-item label="过敏史详情">{{ record.recordAllergyDetails }}</el-descriptions-item>
          <el-descriptions-item label="遗传病史">{{ record.recordInherit }}</el-descriptions-item>
          <el-descriptions-item label="遗传病史详情">{{ record.recordInheritDetails }}</el-descriptions-item>
          <el-descriptions-item label="记录日期">{{ record.recordDate }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{record.remark}}</el-descriptions-item>
        </el-descriptions>
      </div>

    <!-- 充值金额对话框 -->
    <el-dialog title="充值" :visible.sync="moneyDialogFormVisible" style="width: 50%; margin: auto;">
      <el-form :model="money">
        <el-form-item label="充值金额" :label-width="formLabelWidth">
          <el-select v-model="money.money" placeholder="请选择">
            <el-option label="100" value="100"></el-option>
            <el-option label="200" value="200"></el-option>
            <el-option label="500" value="500"></el-option>
            <el-option label="1000" value="1000"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="moneyDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMoney()">充 值</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { recharge } from "@/api/patient/patient"


export default {
  data() {
    return {
      moneyDialogFormVisible: false,
      money: {
        money: undefined
      },
      patient: {
        patientId: "1",
        patientPhone: "18828838858",
        patientName: "张三",
        patientSex: "男",
        patientCardId: "620101199904043521",
        patientBirthday: "1999-04-04",
        patientMoney: "32.52",
        remark: "无"
      },
      record: {
        patientName: "张三",
        recordDesc: "有点感冒",
        recordHealth: "不太好",
        recordInfect: "无传染病史",
        recordInfectDetails: "无",
        recordAllergy: "无过敏史",
        recordAllergyDetails: "无",
        recordInherit: "无遗传病史",
        recordInheritDetails: "无",
        recordDate: "2022-08-01",
        remark: "无"
      }
    };
  },
  methods: {
    addMoney() {
      if (this.money.money == undefined) {
        this.$message.error("请选择充值金额！");
        return;
      }
      recharge(this.money.money).then((result) => {
        this.patient = result.data.patient;
      });
    }
  },
};
</script>